﻿Vue.component('page', {
    template: '<div class="row custom_page"><ul>'+
                            '<li v-if="page>1" v-on:click="next_page(1)">首页</li>' +
                            '<li v-else class="none">首页</li>' +
                            '<li v-if="page<=1" class="none"><</li>'+
                            '<li v-else v-on:click="next_page(page-1)"><</li>'+
                            '<li v-for="(item,index) in end_num" v-bind:class="{current:(index+start_page)==page}" v-on:click="next_page(index+start_page)" v-if="(index+start_page)<=page_count">{{index+start_page}}</li>'+

                            '<li v-if="page>=page_count" class="none">></li>'+
                            '<li v-else v-on:click="next_page(page+1)">></li>'+
                            '<li v-if="page<page_count" v-on:click="next_page(page_count)">尾页</li>' +
                            '<li v-else class="none">尾页</li>' +
                            '</ul>'+
                            '共{{page_count}}页,{{total}}条记录'+
                            '</div>',
    props: ['total',"pagesize","page"],
    data () {
        return {
            end_num: 10,
            page_count:0,
            start_page:1
        }
    },
    methods: {
        next_page:function(page) {
            if(page==this.page){return;}
            this.$emit('getlist',page);
            //alert("a")
        }
    },
    watch:{
        total:function(val){
             var _this=this;
            _this.page_count=Math.ceil(_this.total/_this.pagesize);
             if (_this.page % _this.end_num > 0) {
                _this.start_page = (_this.page - _this.page % _this.end_num) + 1;
             } else {
                _this.start_page = (_this.page - _this.end_num) + 1;
             }
             if (_this.page_count < 10) {
                 _this.end_num = _this.page_count;
             }
        }
    }
})